<script setup lang="ts">
import ArticleDeclaration from '@/views/detail/components/ArticleDeclaration.vue';
import type { ArticleInfo } from '@/types/article.ts';
import ArticleTags from '@/views/detail/components/ArticleTags.vue';

defineProps<{
  articleInfo: ArticleInfo;
}>();
</script>

<template>
  <!-- 文章底部信息 -->
  <div class="article-footer">
    <!-- 文章标签 -->
    <ArticleTags :tags="articleInfo.tags" />
    <!-- 版权声明 -->
    <ArticleDeclaration
      :article-info="articleInfo"
    />
  </div>
</template>

<style lang="less">
// 文章底部样式
.article-footer {
  margin: 48px 0 0; // 使用负边距延伸到父容器的padding
  padding: 24px 40px 24px; // 补充左右padding以对齐内容
  border-top: 1px solid #eaecef;
}
@media (max-width: 768px) {
  .article-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 576px) {
  .article-footer {
    margin-top: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
}
</style>
